<template>
  <div class="common-wrap">
    <QueryForm
      ref="conditionForm"
      module="maritimeAdministration"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length === 0"
          :hasPermiAdd="['order:maritimeAdministration:add']"
          :hasPermiDelete="['order:maritimeAdministration:delete']"
          :buttonType="['add', 'delete']"
          @add="onAdd"
          @delete="onDelete"
        ></ButtonGroup>
      </el-row>
      <MyTable
        tableId="maritimeAdministration"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        ref="commonTable"
        moduleName="maritimeAdministration"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
    </div>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import * as api from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { hasPermi ,characterSegmentation} from "@/utils/mUtils.js";
import { useRouter } from "vue-router";
let { t } = useI18n();
const router = useRouter();
defineOptions({
  name: "MaritimeAdministration",
});
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(true);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "trackingNo",
    title: "订单编码",
    slots: {
      default: ({ row }) => {
        return [
          <el-button
            type="primary"
            disabled={!hasPermi(["order:maritimeAdministration:edit"])}
            link
            onClick={() => {
              onEdit(row);
            }}
          >
            {row.trackingNo || ""}
          </el-button>,
        ];
      },
    },
    width: 150,
  },
  {
    field: "customerNameZh",
    title: "客户名称(中文)",
  },
  {
    field: "customerCode",
    title: "客户代码",
  },
  {
    field: "noPrefix",
    title: "前缀",
  },
  {
    field: "customerServiceName",
    title: "客服",
  },
  {
    field: "bindEmployeeList",
    title: "业务员",
  },
  {
    field: "fbaShipmentId",
    title: "FBA Shipment ID",
  },
  {
    field: "originNo",
    title: "原单号",
  },
  {
    field: "referenceId",
    title: "Reference ID",
  },
  {
    field: "referenceNo",
    title: "参考单号",
  },
  {
    field: "customerInStorageNo",
    title: "客户入仓号",
  },
  {
    field: "transferNo",
    title: "转单号",
  },
  {
    field: "relatedNo",
    title: "关联单号",
  },
  {
    field: "inquiryNo",
    title: "询价号",
  },
  {
    field: "transferCarrierName",
    title: "转单运输商",
  },
  {
    field: "orderTypeName",
    title: "订单类型",
  },
  {
    field: "subProductName",
    title: "渠道名称",
  },
  {
    field: "deliveryMethodName",
    title: "运输方式",
  },
  {
    field: "calcWeightRuleName",
    title: "计重规则",
  },
  {
    field: "overSizeRuleName",
    title: "超规规则",
  },
  {
    field: "includeTaxFlag",
    title: "是否包税",
    formatter: ({ row }) => {
      const obj = {
        1: "是",
        0: "否",
        2: "其他",
      };
      return obj[row.includeTaxFlag] || "-";
    },
  },
  {
    field: "customsDeclareTypeName",
    title: "报关类型",
  },
  {
    field: "customsClearanceTypeName",
    title: "清关方式",
  },
  {
    field: "shipperInfo",
    title: "发货人",
  },
  {
    field: "consigneeInfo",
    title: "收货人",
  },
  {
    field: "notifierInfo",
    title: "通知人",
  },
  {
    field: "goodsTypeName",
    title: "货物类型",
  },
  {
    field: "goodsName",
    title: "货物名称",
  },
  {
    field: "destWarehouseName",
    title: "最终目的",
    formatter: ({ row }) => {
      return `${row.destWarehouseName || "-"}-${
        row.destWarehouseTypeName || "-"
      }`;
    },
  },
  {
    field: "provinceCityArea",
    title: "国家/省/市/区/邮编",
    formatter: ({ row }) => {
      return characterSegmentation(row,["destWarehouseCountryName","destWarehouseProvinceName","destWarehouseCityName","destWarehouseAreaName","destWarehousePostCode"],"/")
    },
  },
  {
    field: "destWarehouseAddress",
    title: "详细地址",
  },
  {
    field: "labelingTypeName",
    title: "贴标",
  },
  {
    field: "receiveGoodsType",
    title: "收货方式",
    formatter: ({ row }) => {
      const obj = {
        0: "客户自送",
        1: "上门提货",
      };
      return obj[row.receiveGoodsType] || "-";
    },
  },
  {
    field: "pickUpTime",
    title: "提货时间",
  },
  {
    field: "receiveWarehouseName",
    title: "收货仓库",
  },
  {
    field: "remark",
    title: "备注",
  },
  {
    field: "forecastPcs",
    title: "预报",
    formatter: ({ row }) => {
      return `${row.forecastPcs || "-"}件/板~${row.forecastWeight || "-"}KGS~${
        row.forecastVolume || "-"
      }CBM~${row.forecastBoxNumber || "-"}箱`;
    },
  },
  {
    field: "inStoragePcs",
    title: "入仓",
    formatter: ({ row }) => {
      return `${row.inStoragePcs || "-"}件/板~${
        row.inStorageWeight || "-"
      }KGS~${row.inStorageVolume || "-"}CBM`;
    },
  },
  {
    field: "chargeWeight",
    title: "计费重",
    formatter: ({ row }) => {
      return `${row.chargeWeight || "-"}/${row.chargeMethodName || "-"}`;
    },
  },
  {
    field: "settlementWeight",
    title: "结算数量",
  },
  {
    field: "soNo",
    title: "SO号",
  },
  {
    field: "mblNo",
    title: "MBL No",
  },
  {
    field: "accountingDate",
    title: "记账日期",
  },
  {
    field: "insuranceType",
    title: "是否保险",
    formatter: ({ row }) => {
      const obj = {
        1: "客户",
        0: "无保险",
        2: "公司",
        3: "自购",
      };
      return obj[row.insuranceType] || "-";
    },
  },
  {
    field: "insuranceGoodsValue",
    title: "货值",
    formatter: ({ row }) => {
      return `${row.insuranceGoodsValue || "-"}/${
        row.insuranceCurrency || "-"
      }`;
    },
  },
  {
    field: "insuranceDeductibleRate",
    title: "免赔率/费率",
    formatter: ({ row }) => {
      return `${row.insuranceDeductibleRate || "-"}/${
        row.insuranceRate || "-"
      }`;
    },
  },
  {
    field: "insurancePremium",
    title: "保费",
  },
  {
    field: "insuranceRemark",
    title: "保险备注",
  },
  {
    field: "beneficialCompany",
    title: "受益公司",
  },
  {
    field: "beneficialTaxNo",
    title: "受益税号",
  },
  {
    field: "beneficialAddress",
    title: "受益地址",
  },
  {
    field: "providerName",
    title: "船司",
  },
  {
    field: "loadingPortName",
    title: "起运港",
  },
  {
    field: "estimatedTimeDeparture",
    title: "ETD/ATD",
    formatter: ({ row }) => {
      return `${row.estimatedTimeDeparture || "-"} / ${
        row.actualTimeDeparture || "-"
      }`;
    },
  },
  {
    field: "dischargePortName",
    title: "卸货港",
  },

  {
    field: "estimatedTimeArrivalDischarge",
    title: "ETA/ATA",
    formatter: ({ row }) => {
      return `${row.estimatedTimeArrivalDischarge || "-"} / ${
        row.actualTimeArrivalDischarge || "-"
      }`;
    },
  },
  {
    field: "deliveryPortName",
    title: "目的港",
  },
  {
    field: "estimatedTimeArrivalDelivery",
    title: "ETA/ATA",
    formatter: ({ row }) => {
      return `${row.estimatedTimeArrivalDelivery || "-"} / ${
        row.actualTimeArrivalDelivery || "-"
      }`;
    },
  },
  {
    field: "vesselName",
    title: "船名/航次",
    formatter: ({ row }) => {
      return `${row.vesselName || "-"} / ${row.voyageNo || "-"}`;
    },
  },

  {
    field: "createByName",
    title: "创建人",
    width: 150,
  },
  {
    field: "createTime",
    title: "创建时间",
    width: 150,
  },
  {
    field: "updateByName",
    title: "更新人",
    width: 150,
  },
  {
    field: "updateTime",
    title: "更新时间",
    width: 150,
  },
]);
const searchForm = ref({});
const searchColumn = ref([
  {
    type: "label_input",
    label: "订单编码",
    prop: "trackingNo",
  },
]);
const multipleSelection = ref([]);
onMounted(() => {
  onSearch();
});
const list = () => {
  loading.value = true;
  api.default.order.maritimeAdministration
    .list({
      ...searchForm.value,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const onDelete = () => {
  const ids = multipleSelection.value.map((item) => item.id);
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.order.maritimeAdministration.remove(ids).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
const onAdd = () => {
  router.push({
    path: "/order/orderManagement/or/maritimeAdd",
    query: {
      title: "海运订单新增",
    },
  });
};
const onEdit = (row) => {
  router.push({
    path: "/order/orderManagement/or/maritimeAdd",
    query: {
      title: "海运订单修改",
      id: row.id,
      detailed: row.trackingNo,
    },
  });
};
</script>

<style lang="scss" scoped>
.common-wrap {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>